<!DOCTYPE html>
	<!--suppress ALL -->
<html>
<head>
		<title></title>
	</head>
	<style>
		div{
			width: 25%;
			height: 90px;
			background-color: red;
		}
	</style>
	<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
	<!--js���ִ���-->
	<script type="text/javascript">
		window.onload = function(){
			initDiv();
			myMouseOver();
		}
		var divArray;
		/**
		 *��ʼ��div
		 **/
		function initDiv(){
			var div1=document.getElementById("div1");
			var div2=document.getElementById("div2");
			var div3=document.getElementById("div3");
			var div4=document.getElementById("div4");
			divArray=[div1,div2,div3,div4];
		}

		/**
		 *��div����¼�
		 **/
		function myMouseOver(){
			for(var i=0 ;i<divArray.length;i++){
				var div=divArray[i];

				div.addEventListener("mouseover",function(){
					this.style.backgroundColor="red";




					for(var i=0 ;i<divArray.length;i++){
						var tempDiv=divArray[i];
						if(this!=tempDiv){
							tempDiv.style.backgroundColor="orange";
						}
					}
				});






				div.addEventListener("mouseout",function(){
					for(var i=0 ;i<divArray.length;i++){
						var tempDiv=divArray[i];
						tempDiv.style.backgroundColor="red";
					}
				});
			}

		}

	</script>
	</body>
</html>
